'use strict';
import React, {PropTypes} from 'react';
import {
    View,
    Image,
    StyleSheet,
    TouchableOpacity,
    Text,
    TextInput,
} from 'react-native';

const styles = StyleSheet.create({
    container: {
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#F5F5F5',
    },
    touchableContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 40,
    },
    text: {
        fontSize: 16,
        color: '#333',
    },
});

class MoreTabBar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showFound: false,
        };
    }

    render() {
        const {
            tabBarNames,
            activeTab,
            tabs,
            goToPage,
        } = this.props;
        return (
            <View style={styles.container}>
                {tabs.map((tab, index) => {
                    let height = activeTab === index ? 3 : 0;
                    let color = activeTab === index ? '#38D68B' : '#333';
                    return (
                        <TouchableOpacity
                            style={{flex: 1}}
                            key={index}
                            onPress={() => goToPage(index)}>
                            <View
                                style={styles.touchableContainer}>
                                <Text style={[styles.text, {color}]}>
                                    {tabBarNames[index]}
                                </Text>
                                <View
                                    style={{
                                        height,
                                        backgroundColor: '#38D68B',
                                        position: 'absolute',
                                        bottom: 0,
                                        left: 28,
                                        right: 28,
                                    }}/>
                            </View>
                        </TouchableOpacity>
                    )
                })}
            </View>
        )
    }
}

MoreTabBar.propTypes = {
    tabBarNames: PropTypes.array.isRequired,
};

export default MoreTabBar;